<!--
 * @Author: 刘昌宏
 * @Date: 2025-07-24 16:36:13
 * @LastEditors: 刘昌宏
 * @LastEditTime: 2025-08-04 10:44:20
 * @Description:
-->
<template>
	<div class="pipeline-execution-detail">
		<el-form
			:model="queryParams"
			ref="queryForm"
			size="small"
			:inline="true"
			label-width="68px"
		>
			<el-form-item
				label="执行批次"
				prop="name"
			>
				<el-input
					v-model="queryParams.batchId"
					style="width: 240px"
					placeholder="请输入执行批次"
					clearable
					@keyup.enter.native="handleQuery"
				/>
			</el-form-item>
			<el-form-item
				label="部署类型"
				prop="deployType"
			>
				<el-select
					v-model="queryParams.deployType"
					placeholder="请选择部署类型"
					style="width: 240px"
				>
					<el-option
						v-for="item in deployTypeOptions"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item
				label="tag"
				prop="code"
			>
				<el-input
					v-model="queryParams.data"
					style="width: 240px"
					placeholder="请输入tag"
					clearable
					@keyup.enter.native="handleQuery"
				/>
			</el-form-item>
			<el-form-item
				label="环境"
				prop="status"
			>
				<el-select
					v-model="queryParams.env"
					style="width: 240px"
					placeholder="请选择环境"
					clearable
				>
					<el-option
						v-for="dict in envOptions"
						:key="dict.value"
						:label="dict.label"
						:value="dict.value"
					/>
				</el-select>
			</el-form-item>
			<el-form-item
				label="创建时间"
				prop="createTime"
			>
				<el-date-picker
					v-model="queryParams.createTime"
					style="width: 240px"
					value-format="yyyy-MM-dd HH:mm:ss"
					type="daterange"
					range-separator="-"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					:default-time="['00:00:00', '23:59:59']"
				/>
			</el-form-item>
			<el-form-item>
				<el-button
					type="primary"
					icon="el-icon-search"
					@click="handleQuery"
					>搜索</el-button
				>
				<el-button
					icon="el-icon-refresh"
					@click="resetQuery"
					>重置</el-button
				>
			</el-form-item>
		</el-form>
		<el-table
			v-loading="loading"
			:data="list"
			border
		>
			<el-table-column
				prop="id"
				align="center"
				label="执行id"
				width="90"
				show-overflow-tooltip
			/>
			<el-table-column
				prop="deployId"
				align="center"
				label="部署id"
				width="90"
				show-overflow-tooltip
			/>
			<el-table-column
				prop="deployType"
				label="部署类型"
				align="center"
				show-overflow-tooltip
				width="140"
			>
				<template #default="{ row }">
					{{ deployTypeOptions?.filter(item => item.value === row.deployType)?.[0]?.label ?? '-' }}
				</template>
			</el-table-column>
			<el-table-column
				prop="batchId"
				label="执行批次"
				align="center"
        width="150"
			/>

			<el-table-column
				label="tag"
				align="center"
				width="145"
			>
				<template #default="{ row }">
					<div
						v-for="(tagItem, index) in dataTransform(row?.data)"
						:key="index"
						class="tags-tag"
					>
						<el-tag style="margin-right: 5px; margin-bottom: 5px">
							{{ tagItem.tag }}
						</el-tag>
					</div>
				</template>
			</el-table-column>

			<el-table-column
				label="服务"
				width="120"
				align="center"
			>
				<template #default="{ row }">
					<div class="column-services">
						<el-popover
							v-for="(tagItem, tagIndex) in dataTransform(row?.data)"
							placement="right"
							title="服务列表"
							trigger="hover"
							:key="tagIndex"
						>
							<div
								class="popover-reference"
								slot="reference"
							>
								查看服务器
							</div>
							<div class="column-services-item">
								<div
									v-for="(service, serviceIndex) in tagItem.services"
									:key="serviceIndex"
								>
									<el-tag style="margin-right: 5px; margin-bottom: 5px">
										{{ service.name }}
									</el-tag>
								</div>
							</div>
						</el-popover>
					</div>
				</template>
			</el-table-column>

			<el-table-column
				label="环境"
				width="90"
				prop="env"
				align="center"
			/>
      <el-table-column
        label="请求数据"
        width="450"
        prop="requestData"
        align="center"
      />

			<el-table-column
				prop="creator"
				label="执行人"
        width="50"
				align="center"
			/>
			<el-table-column
				label="执行时间"
				width="180"
				prop="createTime"
				align="center"
			>
				<template v-slot="scope">
					<span>{{ parseTime(scope.row.createTime) }}</span>
				</template>
			</el-table-column>

			<el-table-column
				label="操作"
				align="center"
				width="100"
				class-name="small-padding fixed-width"
				fixed="right"
			>
				<template v-slot="scope">
					<el-button
						size="mini"
						type="text"
						@click="buttonHandle(scope.row.id)"
						v-text="'查看详情'"
					/>
					<!-- v-hasPermi="['']" -->
				</template>
			</el-table-column>
		</el-table>

		<pagination
			v-show="total > 0"
			:total="total"
			:page.sync="queryParams.pageNo"
			:limit.sync="queryParams.pageSize"
			@pagination="getList"
		/>
		<ExecutionDialog
			v-if="dialogVisible"
			:id="dialogId"
			@dialogHandle="closeHandle"
		/>
	</div>
</template>

<script>
import ExecutionDialog from '../components/executionDialog.vue';
import { piplineExecPage, systemDictDataType } from '@/api/pipeline/pipeline-execution';

export default {
	name: 'pipelineExecutionDetail',
	components: {
		ExecutionDialog,
	},
	data() {
		return {
			deployTypeOptions: [],
			envOptions: [],
			id: '',
			dialogVisible: false,
			dialogId: '',
			// 遮罩层
			loading: true,
			// 导出遮罩层
			exportLoading: false,
			// 总条数
			total: 0,
			// 部署列表
			list: [],
			// 查询参数
			queryParams: {
				pageNo: 1,
				pageSize: 10,
				env: undefined,
				batchId: undefined,
				data: undefined,
				deployType: undefined,
				createTime: [],
			},
		};
	},
	async mounted() {
		try {
			const { data } = await systemDictDataType({ type: 'env2' });
			this.envOptions = data;
		} catch (error) {
			this.$message.error(error);
		}
		this.id = this.$route.query.id;
		this.deployTypeOptions = JSON.parse(this.$route.query.option);
		this.getList();
	},
	methods: {
		dataTransform(data) {
			if (data) {
				return JSON.parse(data);
			}
			return null;
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNo = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.queryParams = {
				pageNo: 1,
				pageSize: 10,
				env: undefined,
				batchId: undefined,
				data: undefined,
				createTime: [],
			};
			this.handleQuery();
		},
		/** 查询列表 */
		async getList() {
			try {
				this.loading = true;
				const res = await piplineExecPage({ ...this.queryParams, deployId: this.id });
				this.list = res.data.list ?? [];
				this.total = res.data.total;
			} catch (err) {
				this.$message.error(err);
			} finally {
				this.loading = false;
			}
		},
		buttonHandle(id) {
			this.dialogVisible = true;
			this.dialogId = id;
		},
		closeHandle() {
			this.getList();
			this.dialogVisible = false;
			this.dialogId = '';
		},
	},
};
</script>

<style lang="scss" scoped>
.pipeline-execution-detail {
	padding: 16px 10px;

	&-add {
		margin-bottom: 16px;
		height: 32px;
		line-height: 32px;
		padding: 0 12px;
	}
	.column-services {
		text-align: center;

		.popover-reference {
			cursor: pointer;
			margin: 0 auto 5px;
			width: 80px;
			height: 28px;
			line-height: 28px;
			text-align: center;
			color: #1890ff;

			&:hover {
				opacity: 0.8;
			}
		}
		&-item {
			max-height: 300px;
			overflow-y: auto;
		}
	}
}
</style>
